<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        align="center"
        :formatter="isTypeText"
        width="180">
      </el-table-column>
      <el-table-column
        prop="authorityValue"
        label="权限值"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="path"
        label="访问路径"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="component"
        label="组件路径"
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="hasAuthority('permission.add') && (scope.row.level === 1 || scope.row.level === 2)"
            type="info"
            size="mini"
            @click="() => { dialogFormVisible = true, dialogTitle = '新增菜单', showAuthorityValue = false, authority.parentId = scope.row.id, authority.type = 1 }"
            icon="el-icon-plus">添加菜单
          </el-button>
          <el-button
            v-if="hasAuthority('permission.add') && scope.row.level === 3"
            type="info"
            size="mini"
            @click="() => { dialogFormVisible = true, dialogTitle = '添加功能', showAuthorityValue = true, authority.parentId = scope.row.id, authority.type = 2 }"
            icon="el-icon-plus">添加功能
          </el-button>
          <el-button
            v-if="scope.row.level === 4 &&  hasAuthority('permission.update')"
            type="primary"
            size="mini"
            icon="el-icon-edit">修改
          </el-button>
          <el-button
            v-if="scope.row.level !== 4 &&  hasAuthority('permission.update')"
            type="primary"
            size="mini"
            icon="el-icon-edit">修改
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <el-form status-icon :model="authority" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
               :label-position="labelPosition">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="authority.name"/>
        </el-form-item>
        <el-form-item label="访问路径" prop="path">
          <el-input v-model="authority.path"/>
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="authority.component"/>
        </el-form-item>
        <el-form-item label="权限值" prop="authorityValue" v-if="showAuthorityValue">
          <el-input v-model="authority.authorityValue"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetData()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import menu from '@/api/acl/menu'

export default {

  data() {
    return {
      labelPosition: 'right',
      tableData: [],
      dialogFormVisible: false,
      authority: {
        parentId: 0,
        name: '',
        // 1菜单，2按钮
        type: '1',
        authorityValue: '',
        path: '',
        component: ''
      },
      dialogTitle: '添加菜单',
      showAuthorityValue: false,
      rules: {
        authorityValue: [
          {required: true, message: '请输入权限值', trigger: 'blur'},
          {min: 2, max: 32, message: '长度在 2 到 32 个字符', trigger: 'blur'}
        ],
      }
    }
  },

  created() {
    this.findAll()
  },

  methods: {

    isTypeText(row, column) {
      return row.type === 1 ? '菜单' : '按钮'
    },

    findAll() {
      menu.findAll().then(response => {
        this.tableData = response.data.items
      })
    },

    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (!this.authority.id) {
            this.saveSysAuthority()
          } else {
            console.log(this.authority);
          }
        }
      })
    },

    resetData() {
      this.dialogFormVisible = false
      this.authority = {}
    },

    saveSysAuthority() {
      menu.saveSysAuthority(this.authority).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.findAll()
          this.dialogFormVisible = false
        }
      })
    },

  }
}
</script>
